<template>
    <a :class='computed_class' @click="change(index)" :index='index'>
        <icon :i-name="name"></icon>
    </a>
</template>
<style>

</style>
<script>
    import Icon from './Icon.vue'

    export default{
        props:['template','active','name','index'],
        data(){
            return{
                msg:'hello vue'
            }
        },
        components:{
            Icon,
        },
        computed:{
          computed_class(){
                return this.active ? "btn-tool active" : "btn-tool"
          }
        },
        methods:{
          //点击,通过事件派发,冒泡到父链,父链在events中捕获,做处理.
          change(i){
            this.$dispatch('tooltip-index',i)
//            var bus = new Vue();
//            bus.$emit('active-selected',i)
//            这个是2.0的功能吧,反正现在没有实现,对于简单的组件中的状态维护,子组件传递父组件用dispatch,父组件用broadcast.
          }
        }
    }
</script>